import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

const myRole = "banzhuren";

//全局注册自定义指令(当创建指令得时候,直接书写一个回调函数,这个函数默认是钩子函数中的bind)
/* Vue.directive("role", (el, binding) => {
  //把不符合条件的按钮删除
  if (!binding.value.includes(myRole)) {
    // el.remove();
    // el.parentNode.removeChild(el);
    console.log(el, el.parentNode);
  }
}); */

/* 
  定义指令的时候,第二个参数可以书写一个对象,这个对象内可以书写多个钩子函数,供不同的逻辑使用
*/
Vue.directive("role", {
  /* bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置 */
  bind() {
    console.log("bind");
  },
  /* 
    inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
  */
  inserted(el, binding) {
    console.log("inserted");
    if (!binding.value.includes(myRole)) {
      el.remove();
      // el.parentNode.removeChild(el);
      // console.log(el, el.parentNode);
    }
  },

  /* 
    update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前
  */
  update() {
    console.log("update");
  },
  /* 
    componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用
  */
  componentUpdated() {
    console.log("componentUpdated");
  },
  /* 
    unbind：只调用一次，指令与元素解绑时调用
  */
  unbind() {
    console.log("unbind");
  },
});

new Vue({
  render: (h) => h(App),
}).$mount("#app");
